<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8"/>
    <title>小米账号 - 注册</title>
    <link rel="icon" href="https://s01.mifile.cn/favicon.ico" type="image/x-icon">
    <link href="/css/login-1.css" type="text/css" rel="stylesheet"/>
    <link href="/css/register-1.css" type="text/css" rel="stylesheet"/>

</head>
<script>
    document.addEventListener('DOMContentLoaded', function () {
        const checkbox = document.getElementById('ch-box');
        const button = document.getElementById('log-in');
        const form = document.querySelector('form');

        checkbox.addEventListener('change', function () {
            if (this.checked) {
                button.removeAttribute('disabled');
                button.style.backgroundColor = '#ff7e29'; // 深色
            } else {
                button.setAttribute('disabled', true);
                button.style.backgroundColor = '#FFBE99'; // 浅色
            }
        });

        form.addEventListener('submit', function (event) {
            event.preventDefault(); // 阻止表单的默认提交行为

            if (!checkbox.checked) {
                alert('请同意用户协议和隐私政策。');
                return;
            }

            const formData = new FormData(form);
            const jsonData = {};
            formData.forEach((value, key) => {
                jsonData[key] = value;
            });

            fetch('/register', {
                method: 'POST',
                headers: {
                    'Content-Type': 'application/json;charset=UTF-8'
                },
                body: JSON.stringify(jsonData)
            }).then(response => {
                return response.json();
            }).then(data => {
                console.log('Success:', data);
                // 在这里处理注册成功后的操作
                if (data.code === '200') {
                    alert('注册成功！');
                    window.location.href = '/login';
                } else {
                    alert('注册失败：' + data.msg);
                }
            }).catch(error => {
                console.error('Error:', error);
                // 在这里处理注册失败后的操作
            });
        });
    });
</script>
<body>
<div id="left">
    <img id="background-image" src="/image/login/background-image.jpg">
</div>

<div id="right">
    <div id="nav">
        <div class="nav-left">
            <img src="/image/mi-icon.png">
            <p>小米账号</p>
        </div>

        <div class="nav-right ">
            <select id="language" class="nav-right font ch">
                <option selected>中文(简体)</option>
                <option>中文(繁体)</option>
                <option>English</option>
            </select>

            <ul class="nav-right font">
                <li class="ch">用户协议</li>
                <li class="ch">隐私政策</li>
                <li class="ch">帮助中心</li>
                <li>|</li>
            </ul>
        </div>
    </div>

    <div id="main">
        <a href="./login" class="noselected  pointer">登录</a>
        <a href="./register" class="selected  pointer">注册</a>
        <form method="post" action="/register">
            <div id="in">
                <select id="country" name="country">
                    <option selected>中国</option>
                    <option>阿富汗</option>
                    <option>英国</option>
                    <option>美国</option>
                    <option>澳大利亚</option>
                </select>
                <input type="text" name="username" placeholder="用户名">
                <input type="password" name="password" placeholder="密码">
                <input type="password" name="confirm_password" placeholder="确认密码">
            </div>
            <div class="ch-box">
                <input id="ch-box" class="ch-box" type="checkbox" name="agree_terms">
                <div id="text">
                    已阅读并同意小米帐号<a class="pointer">用户协议</a>和<a class="pointer">隐私政策</a>
                </div>
            </div>
            <div>
                <button id="log-in" class="pointer" type="submit" disabled>注册</button>
            </div>
        </form>
        <!--        <div class="action">-->
        <!--          <a id="a1" class="pointer">收不到验证码？</a>-->
        <!--        </div>-->
        <div id="other">
            <p>其他方式登录</p>
            <div>
                <img src="/image/login/支付宝.png">
                <img src="/image/login/微信.png">
                <img src="/image/login/QQ.png">
                <img src="/image/login/微博.png">
            </div>
        </div>
    </div>

    <div id="tail">
        小米公司版权所有-京ICP备10046444-京公网安备11010802020134号-京ICP证110507号
    </div>
</div>
</body>

<script src="./js/login.js" type="text/javascript"></script>
</html>